<template>
  <el-row type="flex" justify="center">
    <el-col :span="12">
      <el-row>
        <el-col>
          <el-carousel height="150px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="visibility: hidden">123</el-col>
      </el-row>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="教材" name="first">
          <input-search @patchLogin="dialogVisible=true" />
          <list-span v-if="isLogin" :list="list1" />
        </el-tab-pane>
        <el-tab-pane label="书籍" name="second">
          <input-search />
          <list-span v-if="isLogin" :list="list2" />
        </el-tab-pane>
        <el-tab-pane label="收藏" name="third">
          <input-search />
          <el-table v-if="isLogin" :data="list" border style="width: 100%">
            <el-table-column prop="auth" label="作者"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="press" label="出版社"></el-table-column>
            <el-table-column prop="pubTim" label="出版时间"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-s-check"
                ></el-button>
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-upload2"
                ></el-button>
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-remove-outline"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="numberValidateForm"
        ref="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input
            v-model.number="numberValidateForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passwd">
          <el-input
            v-model="numberValidateForm.passwd"
            type="passwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isLogin=true;dialogVisible=false">登录</el-button
        >
        <el-button @click="dialogVisible=false">取消</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import inputSearch from "@/components/inputSearch/index";
import listSpan from "@/components/listSpan/index";
export default {
  name: "home",
  components: {
    inputSearch,
    listSpan,
  },
  data() {
    return {
      numberValidateForm:{
        name:'',
        passwd:''
      },
      activeName: "first",
      isLogin: false,
      dialogVisible: false,
      list: [
        {
          auth: "鲁西南",
          name: "大号书屋",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
        {
          auth: "鲁西南",
          name: "大号书屋",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
        {
          auth: "鲁西南",
          name: "大号书屋",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
      ],
      list1: [
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
      ],
      list2: [
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
        {
          img: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
          tit: "好吃的汉堡",
          currentDate: new Date(),
        },
      ],
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>